<template>
  <div class="sysLog jsbos-flex-main">
    <el-row class="jsbos-common-search-box" :gutter="16">
      <el-form @submit.native.prevent>
        <el-col :span="6">
          <el-form-item label="关键词">
            <el-input
              v-model="keyword"
              placeholder="请输入关键词查询"
              clearable
              @keyup.enter.native="search()"
            />
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="时间">
            <el-date-picker
              v-model="pickerVal"
              type="daterange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              value-format="timestamp"
              :editable="false"
              clearable
            >
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search()">
              {{ $t("common.search") }}</el-button
            >
            <el-button icon="el-icon-refresh-right" @click="reset()"
              >{{ $t("common.reset") }}
            </el-button>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-tabs
      v-model="activeName"
      @tab-click="handleTabClick"
      class="jsbos-el_tabs"
      style="padding-bottom: 50px"
    >
      <el-tab-pane label="登录日志" name="1">
        <jsbos-table
          v-loading="listLoading"
          :data="loginLogData"
          tooltip-effect="dark"
        >
          <el-table-column
            prop="creatorTime"
            label="登录时间"
            :formatter="jsbos.tableDateFormat"
            width="120"
          />
          <el-table-column prop="userName" label="登录用户" width="120" />
          <el-table-column prop="ipaddress" label="登录IP" width="120" />
          <el-table-column
            prop="platForm"
            label="登录设备"
            show-overflow-tooltip
          />
        </jsbos-table>
      </el-tab-pane>
      <el-tab-pane label="请求日志" name="5">
        <jsbos-table
          v-loading="listLoading"
          :data="requestLogData"
          tooltip-effect="dark"
        >
          <el-table-column
            prop="creatorTime"
            label="请求时间"
            :formatter="jsbos.tableDateFormat"
            width="120"
          />
          <el-table-column prop="userName" label="请求用户" width="120" />
          <el-table-column prop="ipaddress" label="请求IP" width="120" />
          <el-table-column
            prop="platForm"
            label="请求设备"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="requestURL"
            label="请求地址"
            min-width="200"
            show-overflow-tooltip
          />
          <el-table-column
            prop="requestMethod"
            label="请求类型"
            width="80"
            align="center"
          />
          <el-table-column
            prop="requestDuration"
            label="耗时(毫秒)"
            width="80"
          />
        </jsbos-table>
      </el-tab-pane>
      <pagination
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        @pagination="initData"
      />
    </el-tabs>
  </div>
</template>

<script>
import { LogList } from "@/api/permission/userSetting";

export default {
  name: "sysLog",
  data() {
    return {
      keyword: "",
      startTime: "",
      endTime: "",
      activeName: "1",
      loginLogData: [],
      requestLogData: [],
      total: 0,
      listLoading: true,
      listQuery: {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      },
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      pickerVal: [],
    };
  },
  created() {
    this.initData();
  },
  methods: {
    initData() {
      let category = this.activeName;
      this.listLoading = true;
      let data = {
        ...this.listQuery,
        keyword: this.keyword,
        startTime: this.startTime,
        endTime: this.endTime,
        category,
      };
      LogList(data).then((res) => {
        if (category == 1) this.loginLogData = res.data.list;
        if (category == 5) this.requestLogData = res.data.list;
        this.total = res.data.pagination.total;
        this.listLoading = false;
      });
    },
    handleTabClick(tab) {
      this.reset();
    },
    search() {
      if (this.pickerVal && this.pickerVal.length) {
        this.startTime = this.pickerVal[0];
        this.endTime = this.pickerVal[1];
      } else {
        this.startTime = "";
        this.endTime = "";
      }
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      };
      this.initData();
    },
    reset() {
      this.keyword = "";
      this.list = [];
      this.pickerVal = [];
      this.startTime = "";
      this.endTime = "";
      this.listQuery = {
        currentPage: 1,
        pageSize: 20,
        sort: "desc",
      };
      this.initData();
    },
  },
};
</script>
<style lang="scss" scoped>
.sysLog {
  height: 100%;
  overflow: hidden;
  >>> .el-tabs__nav-scroll {
    padding-top: 0 !important;
  }
  el_tabs {
    height: calc(100% - 60px);
    overflow: hidden;
  }
  >>> .el-tabs__content {
    overflow: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    .el-tab-pane {
      height: auto !important;
      flex: 1;
    }
  }
  common-search-box {
    margin-bottom: 0;
  }
}
</style>
